<template>
  <div>
      <div class="banner"></div>
      <div class="cen">

          
            <el-row type="flex" align="middle" class="row-bg" justify="center">
                <!-- <el-col  :xs="22" :sm="3" :md="3" :lg="3" :xl="3" v-for="item in list" :key="item.name">
                    <router-link class="li"  :to="item.path">
                        {{ item.name }}
                    </router-link>
                </el-col> -->
                 <!-- <el-col  :xs="22" :sm="3" :md="3" :lg="3" :xl="3" >
                    <div @click="now = 'about';isShow = true;nowid = ''" class="li"  :class="{active:now == 'about'}">
                       关于我们
                    </div>
                </el-col> -->
                <el-col  :xs="22" :sm="3" :md="3" :lg="3" :xl="3" >
                    <div @click="now = 'contact';isShow = true;nowid = ''" class="li"  :class="{active:now == 'contact'}">
                       联系我们
                    </div>
                </el-col>
                <el-col v-for="item in info" :key="item.id" :xs="22" :sm="3" :md="3" :lg="3" :xl="3" >
                    <div @click="tocom(item.id)" class="li"  :class="{active:nowid == item.id}">
                       {{ item.title }}
                    </div>
                </el-col>
                <!-- <el-col  :xs="22" :sm="3" :md="3" :lg="3" :xl="3" >
                    <div @click="now = 'barrister';isShow = true;nowid = ''" class="li"  :class="{active:now == 'barrister'}">
                       法律顾问
                    </div>
                </el-col>
                <el-col  :xs="22" :sm="3" :md="3" :lg="3" :xl="3" >
                    <div @click="now = 'rules';isShow = true;nowid = ''" class="li"  :class="{active:now == 'rules'}">
                       审核规则
                    </div>
                </el-col> -->
            </el-row>
              <!-- <router-link tag="li"  :to="item.path" v-for="item in list" :key="item.name">
                  {{ item.name }}
              </router-link> -->
          
      </div>
      <div class="aboutBox">

          <components :is="now" v-if="isShow"></components>
          <div v-else v-html="nowCom">
              {{ nowCom }}
          </div>
          <!-- <router-view></router-view> -->
      </div>
      <!-- <div class="infpo">

      </div> -->
  </div>
</template>

<script>
import about from "@/views/aboutusIndex/index.vue";
import contact from "@/views/contact/index.vue";
import barrister from "@/views/barrister/index.vue";
import rules from "@/views/rules/index.vue";
export default {
    components:{
        about,
        contact,
        barrister,
        rules
    },
    methods:{
        init(){
        this.$ajax.post("/adminChannel/list")
        .then(ele => {
            console.log(ele);
            this.info = ele.data.data;
			if(this.$route.query.nowid){
				this.nowid=this.$route.query.nowid
				this.tocom(this.nowid)
				this.now=this.$route.query.now?this.$route.query.now:''
			}
        })
        },
        tocom(val){
            this.isShow = false;
            this.nowid = val;
            this.now = "";
            this.nowCom = this.info.find(ele => ele.id == val).info;
        }
    },
    created(){
		this.init();
		
    },
    data(){
        return {
            now:"contact",
            info:[],
            nowCom:"",
            nowid:"",
            isShow:true,
            list:[
                {
                    name:"关于我们",
                    path:"/aboutus/index"
                },
                {
                    name:"联系我们",
                    path:"/aboutus/contact"
                },
                {
                    name:"商务合作",
                    path:"/aboutus/cooperation"
                },
                {
                    name:"合作伙伴",
                    path:"/aboutus/partner"
                },
                // {
                //     name:"服务协议",
                //     path:"/aboutus/termofservice"
                // },
                {
                    name:"隐私声明",
                    path:"/aboutus/privacy"
                },
                {
                    name:"法律顾问",
                    path:"/aboutus/barrister"
                },
                {
                    name:"审核规则",
                    path:"/aboutus/rules"
                },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.aboutBox{
    // background: #f7f7f7;
    width: 1050px;
    margin: 0 auto;
}
@media screen and (max-width: 750px){
    .aboutBox{
        width: 94%;
    }
}
.banner{
    width: 100%;
    height: 434px;
    background: url(~@/assets/images/aboutus/banner.png) no-repeat center;
}
.cen{
    max-width: 1200px;
    margin: 0 auto;
    // height: 72px;
    .el-row{
        height: 100%;
        flex-wrap: wrap;
    }
    .li{
        text-align: center;
            height: 72px;
            display: flex;
            align-items: center;
            font-weight: bold;
            justify-content: center;
            transition: .3s ease-in;
            background:transparent;
            font-size: 18px;
            color: #333;
    }
    .li:hover{
            background: #eef1ff;
            color: #405cda;
            cursor: pointer;
        }
        .active{
            background: #eef1ff;
            color: #405cda;
            // font-style: italic;
            
        }
    ul{
        display: flex;
        align-items: center;
        // justify-content: space-around;
        li{
            width: 12.5%;
            text-align: center;
            height: 72px;
            display: flex;
            align-items: center;
            font-weight: bold;
            justify-content: center;
            transition: .3s ease-in;
            background:transparent;
            font-size: 18px;
        }
        li:hover{
            background: #eef1ff;
            color: #405cda;
            cursor: pointer;
        }
        .active{
            background: #eef1ff;
            color: #405cda;
            // font-style: italic;
            
        }
    }
    @keyframes liner {
        0%{}
        100%{
            background: #eef1ff;
            color: #405cda;
            // font-style: italic;
        }
    }
}
</style>